<template>
  <view>
    <view v-for="(item, index) in qualificationData" :key="index" class="grid-body mt-20 p-20">
      <view class="title">{{ item.qualityName }}</view>

      <view class="flex justify-between qualifi">
        <view class="flex-auto">
          <view class="code">编号：{{ item.qualityNumber }}</view>
          <view class="date">失效日期：{{ item.expiryDate || '未设置' }}</view>
          <view class="date">复审日期：{{ item.reviewDate || '未设置' }}</view>
        </view>
        <view v-if="item.qualityImage" class="ml-10 img">
          <image :src="config.staticUrl + item.qualityImage" mode="aspectFill"></image>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import config from '@/config'
import { getQualificationInfo } from '@/api/spw/ticketApply'
import { mapGetters } from 'vuex'
export default {
  data() {
    return {
      qualificationData: {},
      config
    }
  },
  computed: {
    ...mapGetters(['staffId'])
  },
  onLoad() {
    getQualificationInfo(this.staffId).then((res) => {
      this.qualificationData = res.data
    })
  }
}
</script>

<style lang="scss" scoped>
.img {
  width: 240rpx;
  height: 130rpx;

  image {
    width: 240rpx;
    height: 130rpx;
  }
}

.qualifi {
  .title {
    font-size: 30rpx;
    font-weight: 700;
    height: 88rpx;
    line-height: 44rpx;
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .code {
    font-size: 28rpx;
    color: #666;
    padding: 10rpx 0;
    word-break: break-all;
  }

  .date {
    color: #999;
  }
}
</style>
